<template>
  <!-- 移动端导航抽屉组件 -->
  <div class="yd-drawer">
    <!-- 背景遮罩过渡动画 -->
    <Transition name="fadeIn">
      <div class="yd-drawer-bg" v-show="visible"></div>
    </Transition>
    <!-- 抽屉内容过渡动画 -->
    <Transition name="slideInRight">
      <div class="yd-drawer-container" @click.stop="" v-show="visible">
        <div class="collpase-container" @click.stop="">
          <!-- 导航列表区域 -->
          <div class="nav-list-wrapper" ref="headerMobileNavWrapperRef">
            <div class="nav-list">
              <!-- 导航项渲染 -->
              <template v-if="globalStore.navHeaderList">
                <div
                  class="nav-item"
                  @click.stop="onClickNavItem(item)"
                  v-for="item in globalStore.navHeaderList"
                  :key="item.value"
                  :class="isActive(item.route_url) ? 'active' : ''"
                >
                  <div class="nav-item__inner">
                    <span>{{ item.title }}</span>
                  </div>
                </div>
              </template>
              <!-- 加载骨架屏 -->
              <div class="mobile-nav-skeleton" v-else>
                <div class="nav-item" v-for="i in 7" :key="i">
                  <Skeleton width="100%" height="113px"></Skeleton>
                </div>
              </div>
            </div>
          </div>
          <!-- 底部区域 -->
          <div class="nav-footer">
            <!-- 登录按钮 -->
            <a-button
              @click.stop="gotoUrl('/login')"
              type="primary"
              size="large"
              v-if="!memberStore.profile"
              block
              >{{ $t("header.login") }}</a-button
            >
            <!-- 用户信息展示 -->
            <div v-else class="nav-footer-user">
              <div class="user-info" @click.stop="gotoUrl('/new_profile')">
                <img
                  class="logo"
                  v-logo-error
                  :src="memberStore.profile?.headimgurl"
                  alt=""
                  v-if="memberStore.profile?.headimgurl"
                />
                <img
                  class="logo"
                  src="~/assets/images/user-logo/default_logo.jpg"
                  alt=""
                  v-else
                />
                <span>{{ memberStore.profile.nickname }}</span>
              </div>
              <!-- 退出登录按钮 -->
              <div class="logout" @click.stop="logout">
                {{ $t("header.exit") }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useGlobalStore, useMemberStore } from "../../../../../store";
const memberStore = useMemberStore();
const globalStore = useGlobalStore();
const route = useRoute();

// 组件props类型定义
type Props = {
  visible: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  visible: false,
});
const emits = defineEmits(["update:visible"]);

// 计算当前路由是否激活
const isActive = computed(() => {
  return (url: string) => {
    let real_url = url.split("?")[0];
    return route.path == real_url;
  };
});

// 跳转URL并关闭抽屉
const gotoUrl = (path: string) => {
  goto(path);
  emits("update:visible", false);
};

// 点击导航项处理
const onClickNavItem = (item: { route_url: string }) => {
  emits("update:visible", false);
  if(item.route_url.includes('http')) {
    window.location.href = item.route_url
    return
  }
  goto(item.route_url);
};

// 退出登录处理
let logoutPath = ["/profile", "/new_profile", "/member"];
const logout = () => {
  memberStore.clearProfile();
  logoutPath.forEach((item) => {
    if (route.path.includes(item)) {
      goto("/");
    }
  });
};
</script>

<style scoped lang="less">
.collpase-container {
  background-color: #fff;
  overflow-y: auto;
  width: 100vw;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  /* 底部区域样式 */
  .nav-footer {
    padding: 61px 82px;
    border-top: 1px solid #ced8e0;
    .ant-btn {
      font-size: 72px !important;
      border-radius: 20px !important;
      height: 246px !important;
    }
    .nav-footer-user {
      display: flex;
      font-size: 82px;
      align-items: center;
      justify-content: space-between;
      .user-info {
        border-radius: 200px;
        padding: 31px;
        border: 1px solid #ccd6de;
        display: flex;
        align-items: center;
        gap: 41px;
        span {
          width: 580px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #172026;
        }
      }
      .logout {
        color: #ff4060;
      }
    }
  }
  
  /* 导航列表区域样式 */
  .nav-list-wrapper {
    height: calc(100vh - var(--yd-header-height) - 368px);
    padding: 61px 82px;
    overflow-y: auto;
  }
  
  /* 导航项样式 */
  .nav-list {
    .nav-item {
      display: flex;
      flex-direction: column;
      padding: 102px 0;
      border-bottom: 1px solid #ced8e0;
      font-size: 72px;
      color: #323232;
      &.active {
        color: var(--yd-primary-color);
      }
      .nav-item__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > span {
          width: 85vw;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .icon-arrow-down {
          transition: all 0.5s;
          transform: translateY(20px);
          &.active {
            transform: translateY(-10px) rotate(-180deg);
          }
        }
      }
      .sub-nav-container {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: all 0.5s;
      }
      .sub-nav {
        min-height: 0px;
        color: #36434d;
        .sub-nav-item {
          padding: 102px;
          border-bottom: 1px solid #e6edf2;
          &.active {
            color: var(--yd-primary-color);
          }
          &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
